<template>
    <view class="popular-services">
      <!-- 标题区域 -->
      <view class="services-header">
        <view class="header-content">
          <text class="title-text">热门服务</text>
          <!-- <text class="subtitle-text">专业服务 · 品质保障</text> -->
        </view>
        <view class="header-decoration">
          <view class="decoration-circle"></view>
          <view class="decoration-circle"></view>
        </view>
      </view>
  
      <!-- 服务卡片容器 -->
      <view class="services-container">
        <!-- 第一行：助医中心和助行中心 -->
        <view class="services-row">
          <view class="service-card medical-card" @click="handleServiceClick('medical', '1952935222735171586')">
            <view class="card-content">
              <view class="card-text">
                <text class="card-title">助医中心</text>
                <text class="card-desc">专业医疗咨询与协助</text>
              </view>
              <view class="card-icon">🏥</view>
            </view>
          </view>
  
          <view class="service-card mobility-card" @click="handleServiceClick('mobility', '1971504478850514945')">
            <view class="card-content">
              <view class="card-text">
                <text class="card-title">助行中心</text>
                <text class="card-desc">出行辅助与交通支持</text>
              </view>
              <view class="card-icon">♿</view>
            </view>
          </view>
        </view>
  
        <!-- 中间大卡片：个案管理中心 -->
        <view class="service-card-large case-card" @click="handleServiceClick('case', '1976652574983086082')">
          <view class="card-content">
            <view class="card-main">
              <view class="card-text">
                <text class="card-title">个案管理中心</text>
                <text class="card-desc">个性化服务方案定制</text>
              </view>
              <image 
                :src="caseIcon" 
                class="w-[84rpx] h-[84rpx] flex-shrink-0 ml-[16rpx]"
                mode="aspectFit"
              />
            </view>
            <!-- <view class="card-badge-large">
              <text class="badge-text">热门推荐</text>
            </view> -->
          </view>
        </view>
  
        <!-- 第三行：母婴中心和老年中心 -->
        <view class="services-row">
          <view class="service-card maternal-card" @click="handleServiceClick('maternal', '1949639687672598530')">
            <view class="card-content">
              <view class="card-text">
                <text class="card-title">母婴中心</text>
                <text class="card-desc">孕产护理与婴幼儿照护</text>
              </view>
              <image 
                :src="newIcon" 
                class="w-[54rpx] h-[54rpx] flex-shrink-0 ml-[16rpx]"
                mode="aspectFit"
              />
            </view>
          </view>

          <view class="service-card elderly-card" @click="handleServiceClick('elderly', '1976653607251632130')">
            <view class="card-content">
              <view class="card-text">
                <text class="card-title">老年中心</text>
                <text class="card-desc">老年人照护与健康管理</text>
              </view>
              <image 
                :src="oldIcon" 
                class="w-[60rpx] h-[60rpx] flex-shrink-0 ml-[16rpx]"
                mode="aspectFit"
              />
            </view>
          </view>
        </view>
      </view>
  
      <!-- 底部弹出模态框 -->
      <view v-if="showModal" class="modal-overlay" @click="closeModal">
        <view class="modal-content" @click.stop>
          <view class="modal-header">
            <text class="modal-title">{{ currentService?.name }}</text>
            <view class="modal-close" @click="closeModal">
              <text class="close-icon">×</text>
            </view>
          </view>
          
          <view class="modal-body">
            <!-- 加载状态 -->
            <view v-if="loading" class="flex-col-center py-12">
              <view class="text-[32rpx] text-#999">加载中...</view>
            </view>
            <!-- 空数据状态 -->
            <view v-else-if="!loading && serviceList.length === 0" class="flex-col-center py-12">
              <view class="text-[32rpx] text-#999">暂无数据</view>
            </view>
            <!-- 数据列表 -->
            <view v-else class="service-list">
              <GoodItem 
                v-for="item in serviceList" 
                :key="item.id" 
                :obj="item" 
                :src="useImage(item.pic || '')"
                @jump="handleItemClick(item)" 
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  /**
   * 热门服务组件 - 优化版
   * 展示5个服务卡片，包含助医中心、助行中心、个案管理中心、母婴中心、老年中心
   * @description 优化后的设计更加大气、现代和专业，支持底部弹出模态框
   */
  
  import { ref, onMounted } from 'vue'
  import { useImage } from '@/hooks'
  import { useRouterPush } from '@/composables'
  import { useNurseGoods } from './services/GoodsService'
  import GoodItem from './components/GoodItem.vue'
  import newIcon from './assets/new.png'
  import oldIcon from './assets/old.png'
  import caseIcon from './assets/bao.png'
  
  interface ServiceType {
    medical: string
    mobility: string
    case: string
    maternal: string
    elderly: string
  }
  
  interface GoodsItem {
    id: string | number
    pic?: string
    goods_name?: string
    type_name?: string
    typeName?: string
    unit?: string
    price?: number
    pricenew?: number
    [key: string]: any
  }
  
  interface CurrentService {
    type: keyof ServiceType
    name: string
  }
  
  // 服务类型映射
  const serviceMap: ServiceType = {
    medical: '助医中心',
    mobility: '助行中心',
    case: '个案管理中心',
    maternal: '母婴中心',
    elderly: '老年中心'
  }
  
  // 响应式数据
  const showModal = ref(false)
  const currentService = ref<CurrentService | null>(null)
  const serviceList = ref<GoodsItem[]>([])
  const loading = ref(false)
  
  // 获取接口方法
  const { loadTreeChildrenNew } = useNurseGoods()
  const { toGoodsDetail } = useRouterPush()
  
  /**
   * 获取服务列表数据
   * @param pid - 父级ID
   */
  const getServiceList = async (pid = '') => {
    loading.value = true
    try {
      const { error, success } = await loadTreeChildrenNew({ pid: pid || '1949639687672598530' })
      if (!error && success) {
        serviceList.value = success
      }
    } finally {
      loading.value = false
    }
  }
  
  /**
   * 挂载时获取数据
   */
  onMounted(() => {
    getServiceList()
  })
  
  /**
   * 处理服务卡片点击事件
   * @param serviceType - 服务类型
   * @param pid - 父级ID，用于获取对应的服务列表
   */
  const handleServiceClick = async (serviceType: keyof ServiceType, pid = '') => {
    const serviceName = serviceMap[serviceType]
    currentService.value = {
      type: serviceType,
      name: serviceName,
    }
    showModal.value = true
    
    // 根据 pid 获取对应的服务列表数据
    await getServiceList(pid)
    
    // 触发自定义事件，让父组件处理跳转逻辑
    emit('serviceClick', {
      type: serviceType,
      name: serviceName,
    })
  }
  
  /**
   * 处理商品项目点击
   * @param item - 商品项目
   */
  const handleItemClick = (item: GoodsItem) => {
    toGoodsDetail({
      id: String(item.id),
      pic: item.pic,
      pname: item.goods_name || item.type_name || item.typeName,
      unit: item.unit,
      nurseType: '2',
      goods_type: '1',
      nurseTypeText: item.goods_name || item.type_name || item.typeName
    })
  }
  
  /**
   * 关闭模态框
   */
  const closeModal = () => {
    showModal.value = false
    currentService.value = null
  }
  
  // 定义事件
  const emit = defineEmits<{
    serviceClick: [payload: { type: keyof ServiceType; name: string }]
  }>()
  </script>
  
  <style lang="scss">
  .popular-services {
    width: 100%;
    padding: 32rpx 24rpx;
    background: #fff;
    // min-height: 100vh;
    box-sizing: border-box;
  }
  
  // 标题区域
  .services-header {
    width: 100%;
    margin-bottom: 48rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
    
    .header-content {
      flex: 1;
      
      .title-text {
        display: block;
        font-size: 32rpx;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 8rpx;
        line-height: 1.2;
      }
      
      .subtitle-text {
        font-size: 26rpx;
        color: #64748b;
        font-weight: 400;
        line-height: 1.4;
      }
    }
    
    .header-decoration {
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      
      .decoration-circle {
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        
        &:last-child {
          background: linear-gradient(135deg, #8b5cf6, #ec4899);
        }
      }
    }
  }
  
  .services-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    box-sizing: border-box;
  }
  
  .services-row {
    width: 100%;
    display: flex;
    gap: 20rpx;
    box-sizing: border-box;
  }
  
  // 通用卡片样式
  .service-card {
    flex: 1;
    height: 140rpx;
    border-radius: 16rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    box-sizing: border-box;
    
    &:active {
      transform: scale(0.98);
    }
    
    .card-content {
      width: 100%;
      height: 100%;
      padding: 20rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
    }
    
    .card-text {
      flex: 1;
      min-width: 0;
      
      .card-title {
        display: block;
        font-size: 30rpx;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 4rpx;
        line-height: 1.2;
      }
      
      .card-desc {
        display: block;
        font-size: 22rpx;
        color: #64748b;
        font-weight: 400;
        line-height: 1.3;
      }
    }
    
    .card-icon {
      font-size: 48rpx;
      line-height: 1;
      flex-shrink: 0;
      margin-left: 16rpx;
    }
  }
  
  // 大卡片样式
  .service-card-large {
    width: 100%;
    height: 160rpx;
    border-radius: 16rpx;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    box-sizing: border-box;
    
    &:active {
      transform: scale(0.98);
    }
    
    .card-content {
      width: 100%;
      height: 100%;
      padding: 20rpx 24rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
    }
    
    .card-main {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
    }
    
    .card-text {
      flex: 1;
      min-width: 0;
      
      .card-title {
        display: block;
        font-size: 34rpx;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 4rpx;
        line-height: 1.2;
      }
      
      .card-desc {
        display: block;
        font-size: 24rpx;
        color: #64748b;
        font-weight: 400;
        line-height: 1.3;
      }
    }
    
    .card-icon {
      font-size: 56rpx;
      line-height: 1;
      flex-shrink: 0;
      margin: 0 20rpx;
    }
    
    .card-badge-large {
      background: linear-gradient(135deg, #f59e0b, #ec4899);
      padding: 6rpx 14rpx;
      border-radius: 14rpx;
      box-shadow: 0 3rpx 10rpx rgba(245, 158, 11, 0.3);
      flex-shrink: 0;
      
      .badge-text {
        font-size: 18rpx;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
      }
    }
  }
  
  // 各卡片颜色主题
  .medical-card {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
  }
  
  .mobility-card {
    background: linear-gradient(135deg, #e0e7ff, #ede9fe);
  }
  
  .case-card {
    background: linear-gradient(135deg, #fef3c7, #fef7ed);
  }
  
  .maternal-card {
    background: linear-gradient(135deg, #fce7f3, #fdf2f8);
  }
  
  .elderly-card {
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
  }
  
  // 模态框样式
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(8rpx);
    animation: fadeIn 0.3s ease;
  }
  
  .modal-content {
    width: 100%;
    max-height: 80vh;
    background: #fff;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.15);
  }
  
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 32rpx 24rpx;
    border-bottom: 1rpx solid #f1f5f9;
    
    .modal-title {
      font-size: 36rpx;
      font-weight: 700;
      color: #1e293b;
    }
    
    .modal-close {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #f1f5f9;
      
      .close-icon {
        font-size: 32rpx;
        color: #64748b;
        font-weight: 300;
      }
    }
  }
  
  .modal-body {
    padding: 24rpx 32rpx 40rpx;
    max-height: calc(80vh - 120rpx);
    overflow-y: auto;
  }
  
  .service-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding-bottom: 180rpx !important;
  
  }
  .gos {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  </style>

